Introduction to Website and Web App Development

Tools


We are going to be using a variety of tools during this semester. The core tools that we will be using is a text editor, our web browsers, and GitHub.

CodePen

CodePen (codepen.io) is a tool that allows you to do rapid prototyping of HTML, CSS, and JavaScript. In computer science, rapid prototyping refers to developing “proof of concept” code and applications. Using CodePen, you can write snippets of web code without needing to develop an entire website. Also, some of the “setup” code that we’ll learn about next week is done automatically by CodePen, so you can stand up a new CodePen site with no work. I’ll also be using CodePen to share snippets of code throughout the course.

Text Editors

In this course, we will not use any graphical editors for our code. We will only write code in a raw text editor. More and more text editors are on the market designed for coders. Some have lots of features to make coding easier and others are fairly bare-bones. There are a number of good code text editors that you are welcome to use based on your preferences. Notepad++ (Windows) and TextWrangler (Mac) are two of the oldest and simplest.

However, the most popular tool right now, by far, is Visual Studio Code, an open source tool from Microsoft. VS Code is incredibly feature-rich and is recommended for this course. Read the Getting Started Guide to download and install VS Code.

Git

Git is a version control system. A version control system is a database that includes each copy of our code changes, along with what changed. Git (and GitHub, a cloud-based service that runs Git) automatically has features that allow multiple coders to work on a file at the same time and then reconcile all of those changes. People can even take bits of code to work on, make changes, and then include those changes in the original code (called branching and merging).

Watch these overview videos:

While most people use GitHub at the command line, we’ll be using GitHub Desktop which is a GUI interface for GitHub.

Watch Github Desktop Overview or read the manual